<!--
 * @Descripttion: 
 * @Author: voanit
 * @Date: 2022-02-22 14:50:46
 * @LastEditors: voanit
 * @LastEditTime: 2022-02-22 15:32:40
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div.box {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    p {
      width: 30px;
      height: 30px;
      background-color: red;
    }

    .target {
      width: 100px;
      height: 100px;
      border: 1px solid green;
    }
  </style>
</head>

<body>
  <div class="box">12333333333333333333333333444444444444444444444444444444444444444444443333333333333333</div>


  <p draggable="true"></p>

  <div draggable="true" class="target"></div>
  <script>
    /*
    自己不做找对象做==========
    研究对象：属性+方法+事件回调
    */
    // var xml = new XMLHttpRequest();
    // xml.open('get', '')
    // xml.send()
    // xml.onload=function(){
    //  console.log( xml.responseText);

    // }

    var p = document.querySelector('p')
    var target = document.querySelector('.target')

    var box = null
    /* 被拖拽元素事件 */
    window.ondragstart = function (e) {
      console.log(e.target, 'ondragstart');
      box = e.target
    }
    // p.ondrag = function () {
    //   //console.log('ondrag');
    // }

    // p.ondragleave = function () {
    //   //console.log('ondragleave');
    // }

    /* 目标元素事件 */
    // target.ondragenter = function () {
    //   console.log('ondragenter');
    // }
    // target.ondragleave = function () {
    //   console.log('target====ondragleave');
    // }
    window.ondragover = function (e) {
      //  阻止默认行为===才能触发 ondrop
      e.preventDefault();
      console.log('ondragover');
    }
    window.ondrop = function (e) {
      //  需要在ondragover阻止浏览器默认行为
      console.log(e, 'ondrop');
      e.target.appendChild(box)
    }





  </script>
</body>

</html>